<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>员工列表</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <%--引入jquery--%>
    <%--引入css样式--%>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

</head>
<body>

<!-- 员工修改的模态框 -->
<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">修改员工</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">员工姓名</label>
                        <div class="col-sm-10">
                            <p class="form-control-static" id="empName_update_static"></p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">email</label>
                        <div class="col-sm-10">
                            <input type="text" name="empEmail" class="form-control" id="empEmail_update_input"
                                   placeholder="请输入邮箱">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="empGender" id="empGender1_update_input" value="M" checked> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="empGender" id="empGender2_update_input" value="F"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">部门</label>
                        <div class="col-sm-4">
                            <%--                            部门提交部门id即可--%>
                            <select class="form-control" name="dId">
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="emp_update_btn">更新</button>
            </div>
        </div>
    </div>
</div>






<div class="container">
    <fieldset>
        <legend class="layui-field-title">员工信息</legend>
        <!-- 设置条件查询框 -->
        <div class="row">
            <div class="col-md-5 col-md-offset-2">
                <form class="form-inline" id="conditionalForm">
                    <div class="form-group" style="margin: 0.1em">
                        <label for="InputName" style="margin: 0.3em">员工姓名:</label>
                        <input type="text" class="form-control" id="InputName" placeholder="请输入员工姓名" name="empName">
                    </div>
                    <div class="form-group" style="margin: 0.1em">
                        <label style="margin: 0.3em">部门:</label>
                        <select class="form-control" name="dId" id="dept_query_select">
                            <option value="0">--请选择--</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="col-md-5 ">
                <button type="submit" class="btn btn-primary" id="condition_button">查询</button>
                <button type="submit" class="btn btn-danger" id="condition_reset_button">重置条件/返回</button>
            </div>
        </div>

    </fieldset>
    <%--    按钮--%>
    <div class="row">
        <div class="col-md-9">
            <button class="btn btn-primary btn-sm" id="emp_add_modal_btn">新增</button>
            <button class="btn btn-danger btn-sm" id="emp_delete_all_btn">删除</button>
        </div>
        <%--            分页文字信息--%>
        <div class="col-md-3" id="page_info_area">

        </div>
    </div>



<script type="text/javascript">

    var totalRecord,currentPage,currentDept;
    currentDept = 0;
    <%--页面加载完成之后，直接发送一个ajax请求，要到分页数据--%>
    $(function (){
        //跳转到首页
        to_page(1);
    })

    //跳转到指定的页面,发送ajax请求，获取json数据
    function to_page(pn){
        $.ajax({
            url:"${APP_PATH}/emps",
            data:"pn=" + pn + "&" + $('#conditionalForm').serialize(),
            type:"GET",
            //result获取到了返回的Msg对象(JSON数据)
            success:function (result){
                //重新显示下拉列表的部门信息
                getDepts2("#conditionalForm select");
                console.log(result);
                //    1、请求成功解析并显示员工信息
                build_emps_table(result);
                //    2、解析并显示分页信息
                build_page_info(result);
                //    3、解析显示分页条数据
                build_page_nav(result);
            }
        })
    }

    /**
     * 发送ajax请求，查询部门信息，以json格式返回
     * 加个请选择在里面，再查出所有的部门信息并显示在下拉列表里
     */
    function  getDepts2(ele){
        //清空之前下拉列表的值
        $(ele).empty();
        var optionEle = $("<option></option>").append("--请选择--").attr("value",0);
        //加入到ele对象中，这里传入的是查询表单对应的id值中select元素：#conditionalForm select
        optionEle.appendTo(ele);
        getDepts_Real(ele);
        $(ele).val(currentDept);
    }

   /*将返回的json字符串传入ele参数中，遍历加入到下拉列表中*/
    function getDepts_Real(ele){
        $.ajax({
            //不加这一条可能会在修改的时候部门信息显示错误
            async:false,
            url:"${APP_PATH}/depts",
            type:"GET",
            success:function (result){
                //在页面控制台中显示传入来的数据
                console.log(result);
                //显示部门信息在下拉列表中
                $.each(result.extend.depts,function(){
                    var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
                    optionEle.appendTo(ele);
                })
            }
        })
    }


    /*****************************修改员工操作*********************************/
    /**
     * 绑定编辑按钮的点击事件
     * 在创建按钮的时候就绑定
     *
     */
    $(document).on("click",".edit_btn",function (){
        //查出部门信息并显示
        getDepts("#empUpdateModal select");
        //查出员工信息并显示
        getEmp($(this).attr("edit-id"));
        //把员工id传给模态框的更新按钮
        $("#emp_update_btn").attr("edit-id",$(this).attr("edit-id"));
        //弹出模态框
        $("#empUpdateModal").modal({
            backdrop:"static"
        });
    });

    <%--获取员工信息--%>
    function getEmp(id){
        $.ajax({
            url:"${APP_PATH}/emp/"+id,
            type:"GET",
            success: function (result) {
                var empData = result.extend.emp;
                $("#empName_update_static").text(empData.empName);
                $("#empEmail_update_input").val(empData.empEmail);
                $("#empUpdateModal input[name=empGender]").val([empData.empGender]);
                $("#empUpdateModal select").val([empData.dId]);
            }
        })
    }

    /*点击更新保存按钮时，触发点击事件
    *发送ajax请求前，先校验格式是否正确
    * */
    $("#emp_update_btn").click(function () {
        //验证邮箱是否合法
        var email = $("#empEmail_update_input").val();
        var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        if (!regEmail.test(email)) {
            //调用函数以指定的格式显示提示信息
            show_validate_msg("#empEmail_update_input", "error", "邮箱格式不正确");
            return false;
        } else {
            show_validate_msg("#empEmail_update_input", "success", "");
        }
        confirm("员工id:"+$(this).attr("edit-id"));
        //发送ajax请求保存员工数据
        $.ajax({
            url: "${APP_PATH}/emp/" + $(this).attr("edit-id"),
            type: "PUT",
            data: $("#empUpdateModal form").serialize(),
            success: function (result) {
                //关闭模态框，回到原来的页面
                $("#empUpdateModal").modal('hide');
                to_page(currentPage);
            }
        });
    });

    /****************************************************/



</script>


</body>
</html>